<template>
	<div>
		<el-tabs v-model="editableTbsValue" type="card" closable @tab-remove="removeTab" @tab-click="tabClick($event)">
			<el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
			</el-tab-pane>
		</el-tabs>
		<router-view />
	</div>
</template>

<script>
	export default {
		methods: 
		{
			removeTab(targeName) {
				//console.log(targeName)
				let tabs = this.editableTabs;
				let activeName = this.editableTbsValue;
				if (activeName === targeName) {
					tabs.forEach((tab, index) => {
						if (tab.name === targeName) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if (nextTab) {
								activeName = nextTab.name;
							}
						}
					});
				}
				this.editableTbsValue = activeName;
				this.editableTabs = tabs.filter(tab => tab.name !== targeName);
				let newTabs=this.editableTabs;
				//window.sessionStorage.setItem("tabsPage", JSON.stringify(newTabs));
				//window.sessionStorage.setItem("tabValue", activeName);
				if(tabs.length>1){
					this.$router.push({
					name: activeName
					});
				}
				else{
					this.$router.push({
						name:"Home"
					})
				}
			},
			tabClick(event) {
				//写一个点击tabs跳转
				this.$router.push({
					name: event.name
				});
				
			},
		},
		created() {
			 //this.$store.state.tabsPage=sessionStorage.getItem("tabsPage");
			 //this.$store.state.tabValue=sessionStorage.getItem("tabValue");
			 console.log(this.$store.state.tabValue)
		},
		computed: {
			editableTabs: {
				get() {
					return this.$store.state.tabsPage;
				},
				set(val) {
					this.$store.state.tabsPage= val;
				}
			},
			editableTbsValue: {
				get() {
					return this.$store.state.tabValue;
				},
				set(val) {
					this.$store.state.tabValue = val;
				}
			}
		}
	}
</script>
<style>
	.el-tabs__nav .el-tabs__item:nth-child(1) span{
	    display: none;
	}
</style>